<template>
  <div>
    <van-sticky v-show="watching">
      <van-nav-bar title="门票详情">
        <template #right>
          <van-icon name="wap-home-o" size="22" color="#00be88" />
          <van-icon name="phone-o" size="22" color="#00be88" />
          <van-icon name="share-o" size="22" color="#00be88" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <van-swipe
      class="my-swipe"
      indicator-color="white"
      :height="205"
      @change="onChange"
    >
      <van-swipe-item v-for="item in ring" :key="item.id">
        <img :src="item.pic" alt="" class="swiper_img" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
        <div class="custom-nodifand">
          <p>卡券 | 产品编号 292804</p>
        </div>
      </template>
    </van-swipe>

    <div class="content">
      <p>
        【春日露营追风】上海金山廊下湖畔营地套票（围炉煮茶/烧烤/火锅多套餐可选
        营地盲盒套圈\飞盘\野营大飞行棋\羽毛球等玩乐可选
        可带宠物/露营聚会/团建轰趴/闺蜜聚餐/生日派对）
      </p>
      <div class="content_div">
        <div class="content_div_first">
          <p>可带宠物</p>
        </div>
        <div class="content_last">
          <div class="content_div_last" v-for="item in warent" :key="item.id">
            <van-icon name="passed" color="#00be88" size="15px" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="indicate">
      <div class="indicate_div">
        <van-icon name="location-o" size="20px" color="#00be88" />
        <span>地址:</span>
        <p>金山廊下生态园</p>
      </div>
      <van-icon name="arrow" />
    </div>

    <div
      class="note_bar"
      @click="isShow = !isShow"
      v-for="item in narr"
      :key="item.id"
    >
      <div class="note_bar_first" v-show="isShow">
        <p>{{ item.title }}</p>
        <van-icon name="arrow-up" color="#666666" />
      </div>
      <div class="note_bar_first" v-show="!isShow">
        <p>{{ item.detail }}</p>
        <van-icon name="arrow-down" color="#6666666" />
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/contern/footer.vue";
export default {
  data() {
    return {
      current: 0,
      ring: [
        {
          pic: require("../../assets/img/98a7372e-8e95-4b1d-a27a-4d495eb14cc4_202302231629.jpg"),
        },
        {
          pic: require("../../assets/img/6feea60b-515a-4f6b-9288-a5e89f34c89f_202209141228_500_350.jpeg"),
        },
        {
          pic: require("../../assets/img/10ef94af-2910-47f7-96b7-02d2febb5311_202301061315.jpg"),
        },
        {
          pic: require("../../assets/img/9e4c23a2-d501-4cc6-ab9c-6b1221126468_202210281129_500_350.png"),
        },
      ],
      warent: [
        { title: "产生积分" },
        { title: "积分抵扣" },
        { title: "及时确认" },
      ],
      narr: [
        {
          title: "特别提醒:春野秋梦营地并非景区或酒店，请您在充分了解",
          detail:
            "特别提醒:春野秋梦营地并非景区或酒店，请您在充分了解这一点的基础上入营。营地提倡亲自动手体验，增强互动交流，打造户外露营社交新空间。 营地开放时间：12:00-19:00；",
        },
      ],
      isShow: true,
      watching: false,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    navbar() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(scrollTop);
      if (scrollTop >= 450) {
        this.watching = true;
      } else {
        this.watching = false;
      }
    },
  },
  components: {
    Footer,
  },
  mounted() {
    window.addEventListener("scroll", this.navbar);
  },
};
</script>

<style lang="scss" scoped>
::v-deep.van-nav-bar .van-icon {
  margin-right: 5px;
}
.content {
  padding: 15px;
  background-color: #fff;
  border-bottom: 0.5px solid #f4f5f5;
  p {
    font-size: 15px;
    font-weight: bold;
  }
  .content_div {
    margin-top: 20px;
    .content_div_first {
      width: 56px;
      height: 19px;
      border: 1px solid #666666;
      p {
        font-size: 12px;
        font-weight: 300;
        text-align: center;
        line-height: 19px;
      }
    }
  }
  .content_last {
    width: 100%;
    margin-top: 10px;
    display: flex;
    .content_div_last {
      width: 72px;
      height: 18px;
      display: flex;
      ::v-deep(.van-icon-passed) {
        line-height: 18px;
      }
      p {
        margin-left: 3px;
        font-size: 12px;
        font-weight: 300;
        margin-right: 3px;
      }
    }
  }
}
.indicate {
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  padding: 14px;
  justify-content: space-between;
  border-bottom: 0.5px solid #f4f5f5;
  .indicate_div {
    display: flex;
    ::v-deep(.van-icon-location-o) {
      line-height: 20px;
    }
    span {
      margin-left: 5px;
      font-size: 15px;
    }
    p {
      margin-left: 5px;
      font-size: 14px;
      color: #666666;
    }
  }
  ::v-deep(.van-icon-arrow) {
    line-height: 25px;
  }
}
.note_bar {
  width: 100%;
  padding: 14px;
  background-color: #fff8dd;
  margin-bottom: 10px;
  .note_bar_first {
    display: flex;
    justify-content: space-between;
    p {
      font-size: 13px;
      color: #b88b66;
      line-height: 12px;
    }
  }
}
</style>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
}
.swiper_img {
  width: 100%;
  height: 205px;
}
.custom-nodifand {
  font-size: 13px;
  color: #fff;
  position: absolute;
  left: 5px;
  padding: 2px 5px;
  bottom: 3px;
}
</style>
